Les Tableaux (XHTML)

Tout comme les listes à puces, les tableaux permettent de structurer les données. On y a souvent recours lorsqu'on doit synthétiser des informations redondantes (comparatifs, listes de messages, etc.). Leur lecture est d'ailleurs souvent plus efficace pour les internautes que de longs paragraphes de texte.
Voici le code XHTML minimal d'un tableau.

Structure d'un tableau

Les balises d'un tableau doivent être imbriquées dans le bon ordre. Si l'on fait une erreur, il est possible que notre tableau n'apparaisse pas du tout comme nous l'avions imaginé !.
Tout d'abord, il faut savoir qu'un tableau se place à l'intérieur des balises <table> </table>. Tout comme les listes à puces, les tableaux doivent être à l'éxtérieur des balises de paragraphe <p> </p> et non à l'intérieur car un tableau n'est pas un paragraphe :

Un tableau se crée ligne par ligne. Chaque ligne est représentée par une paire de balises <tr> </tr>. Si on veut écrire un tableau de 3 lignes, on doit donc écrire :

Maintenant, il faut découper chaque ligne en plusieurs cellules. On crée une cellule à l'aide de la balise <td> </td>. Cette balise doit obligatoirement se trouver à l'intérieur d'une ligne <tr> </tr>. Si l'on veut créer un tableau à 3 lignes et 2 colonnes, il faut écrire :

Un petit exemple concret :

Exemple

C'est pas mal, mais ce n'est pas le résultat éspéré ! En effet le tableau n'a aucune bordure par défaut. Il faudra utiliser le CSS pour mettre en forme notre tableau (Les Bordures de Tableaux (CSS)).

Structure d'un tableau plus élaboré

Nous avons vu comment créer un tableau très simple, mais il est possible de faire des tableaux un peu plus complexes (pour les exemples qui suivent une bordure en css a été rajouté).

Les en-têtes de tableaux

En plus de la balise <td>, il existe une balise <th> qui permet de créer des cellules servant d'en-tête au tableau. En général, on place ces balises sur la première ligne.

Exemple

Le navigateur met généralement le texte de ces cellules d'en-tête en gras pour qu'on puisse les différencier par rapport aux autres cellules.

Donner un titre au tableau

Il est recommandé de donner un titre à son tableau. Le titre s'écrit à l'intérieur d'une balise <caption> </caption> qui doit se trouver juste après la balise <table>. Cela nous donne, en reprenant l'éxemple précédent :

Exemple

Par ailleurs on peut attribuer un attribut summary à la balise <table>. Il permet notamment de donner un résumé du tableau aux personnes handicapées. En effet, celles-ci ne peuvent pas en avoir immédiatement une vision globale comme nous : un navigateur vocal leur lit le tableau au fur et à mesure, ce qui rend la lecture d'un tableau délicate pour ce type de personnes.
Un résumé à l'aide de l'attribut summary peut leur être très utile :

Diviser un grand tableau en trois parties

Si le tableau est particulièrement gros, il est recommandé de le diviser en plusieurs parties. Cela rend la structure du tableau plus claire pour le navigateur, et le code sera plus lisible par la même occasion. On peut créer jusqu'à trois parties dans un tableau :

• Un en-tête de tableau : on le place à l'intérieur d'une balise <thead> </thead>.
• Un corps de tableau :c'est la partie centrale, que l'on place à l'intérieur de <tbody> </tbody>.
• Un pied de tableau :situé tout en bas du tableau, le pied se place à l'intérieur de <tfoot> </tfoot>.

En général dans le pied de tableau, on écrit la même chose que dans l'en-tête de tableau.

Bien sur l'ajout de ces trois balises n'est pas obigatoire. Elle est juste conseillée si l'on a un grand tableau. Cela peut permettre de se repérer plus facilement dans le code d'une part, et d'autres part le navigateur "comprend" mieux ainsi la logique de notre tableau.

En pratique, le contenu des balises sera affiché dans l'ordre suivant :

1. <thead>
2. <tbody>
3. <tfoot>

Or il est demandé de placer la balise <tfoot> avant <tbody> dans le code. De ce fait il faut écrire les balises dans cet ordre :

1. <thead>
2. <tfoot>
3. <tbody>

Attention donc à ce petit piège !. Cela permet au navigateur de pouvoir afficher le pied de page avant d'avoir reçu toutes les données du corps du tableau.

Voici un exemple de tableau divisé en 3 parties pour bien mettre les choses au clair :

Exemple

Visuellement, les éléments s'affichent bien dans le bon ordre.

Fusionner les cellules

Pour certains tableaux, un peu complexes, on a parfois besoin de fusionner des cellules, c'est à dire de faire en sorte qu'une cellule occupe la place de plusieurs cellules. Cela nous permet donc de créer une cellule plus grande que les autres pour regrouper ainsi plusieurs colonnes ou plusieurs lignes.

Fusion de colonnes

Pour qu'une cellule fusionne avec d'autres colonnes, on utilise l'attribut colspan de la balise <td>. La valeur que prendra l'attribut et le nombre de cellules avec lesquelles elle doit fusionner.

Par exemple si on écrit

Cela signifie que cette cellule occupera la place de deux cellules. Elle fusionnera avec la cellule de la colonne d'à côté.

Voici un exemple plus concret :

Exemple

L'on constate qu'il y a bien eu une fusion de 2 cellules sur la dernière ligne.

Fusion de lignes

La fusion de lignes fonctionne exactement de la même manière que la fusion de colonnes. On utilise cette fois l'attribut rowspan.

Par exemple, si on veut renverser le tableau précédent pour faire en sorte que les en-têtes soient situés sur la colonne de gauche, on écrira le code suivant :

Exemple

Cette organisation peut sembler plus déroutante car il est plus difficile d'écrire le code pour un tableau disposé de cette manière.Toutefois pour des raisons de présentations, on peut être ammené à faire des tableaux de cette manière.

Voir la partie des Tableaux (CSS).

Voir la partie sur les Formulaires.